<template>
	<view class="sp-section sp-field">
		<!-- 栏位照片 -->
		<view class="sp-field__image">
			<u-swiper :list="images" height="520px" :key="imagesKey" />
		</view>
		
		<!-- 栏位详情 -->
		<view class="sp-field__info">
			<view class="sp-field__info-name">{{ info.title }}</view>
			<view class="sp-field__info-desc">消毒类型: {{ info.type }}</view>
			<template v-if="info.type == '烘干'">
				<view class="sp-field__info-desc">消毒状态: {{ info.stage >= 2 ? '已完成' : '进行中' }}</view>
			</template>
			<template v-else>
				<view class="sp-field__info-desc">消毒状态: {{ info.stage >= 3 ? '已完成' : '进行中' }}</view>
			</template>
			<view class="sp-field__info-desc">{{ info.type }}开始时间: {{ info.start }}</view>
			<template v-if="info.type == '烘干'">
				<view class="sp-field__info-desc">{{ info.type }}结束时间: {{ info.end }}</view>
				<view class="sp-field__info-desc" style="display: flex; align-items: center;">
					{{ info.type }}剩余时间: <u-count-down :time="count" format="HH:mm:ss" @finish="isEnd = true" />
				</view>
			</template>
			<template v-if="info.type == '消毒'">
				<view class="sp-field__info-desc">{{ info.type }}结束时间: {{ info.end }}</view>
				<view class="sp-field__info-desc" style="display: flex; align-items: center;">
					{{ info.type }}剩余时间: <u-count-down :time="count" format="HH:mm:ss" @finish="isEnd = true" />
				</view>
			</template>
			<!-- block -->
			<view style="height: 140rpx;"></view>
			<!-- 进入烘干 -->
			<template v-if="info.type == '烘干' && info.stage < 4">
				<view class="sp-room__submit">
					<button
						v-if="info.stage <= 2"
						:class="{ 'disabled': info.stage<2 && !isEnd }"
						@click="toDetail(1)"
					>已取走全部消毒物资</button>
					<button v-else class="disabled">已完成</button>
				</view>
			</template>
			<!-- 进入消毒 -->
			<template v-if="info.type == '消毒' && info.stage < 4">
				<view class="sp-room__submit">
					<button
						v-if="info.stage <= 3"
						:class="{ 'disabled': !isEnd }"
						@click="toDetail(2)"
					>进入{{ info.type }}详情</button>
					<button v-else class="disabled">已完成</button>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import dayjs from '../../utils/dayjs.min.js';
	import { file, uptTask } from '@/api/task.js'
	export default {
		name: 'spIndex',
		components: {},
		data () {
			return {
				info: {},
				images: [],
				params: {},
				count: 0,
				isEnd: false,
				imagesKey: 0,
			}
		},
		onLoad (option) {
			this.info = uni.getStorageSync('taskDetail')
			this.params.id = option.id
			this.params.name = option.name
			this.params.mid = option.mid
			this.params.stage = option.stage
			this.info.start = dayjs(this.info.stage_updated_at).format('YYYY-MM-DD HH:mm:ss')
			this.info.end = dayjs(this.info.end_time).format('YYYY-MM-DD HH:mm:ss')
			const start = new Date().getTime()
			const end = new Date(this.info.end).getTime()
			this.count = start > end ? 0 : Math.abs(start - end)
			this.isEnd = dayjs().subtract(this.info.type == '烘干' ? 240 : 30, 'minute').isAfter(dayjs(this.info.stage_updated_at))
			uni.setNavigationBarTitle({
				title: this.info.title
			})
			if (this.info && this.info.images && this.info.images.length) {
				this.images = this.info.images.map(item => file + item.image_path)
				this.images.sort((a, b) => {
				  // 从URL中提取时间戳部分
				  const timestampA = parseInt(a.split('/').pop().split('.')[0], 10);
				  const timestampB = parseInt(b.split('/').pop().split('.')[0], 10);
				
				  // 按时间戳升序排序
				  return timestampA - timestampB;
				});
				this.imagesKey++
			}
			console.log('时间', this.info)
		},
		onShow () {},
		created () {},
		mounted () {},
		methods: {
			toDetail(type) {
				console.log(this.count)
				if (!this.isEnd) {
					this.$u.toast('还没到取出时间')
					return false
				}
				const params = {
					...this.params
				}
				if (this.info.type === '消毒') {
					params.step = this.images.length == 2 ? 3 : this.images.length == 4 ? 6 : 7
				}
				this.$u.route(type == 1 ? '/pages/disinfect/dry' : '/pages/disinfect/soak' , params)
			},
			// 更新烘干任务状态
			updateTask() {
				if (this.count > 0) {
					this.$u.toast('还没到取出时间')
					return false
				}
				const params = {
					stage: 4,
				}
				// const infos = uni.getStorageSync('aiUserInfo')
				uptTask(this.info.id, params).then(res => {
					this.$u.toast('取出成功')
					setTimeout(() => {
						uni.setStorage({
							key: 'refresh',
							data: true,
							success: () => {
								uni.navigateBack()
							}
						})
					}, 1500)
				}).catch(err => {
					this.$u.toast('取出失败')
				})
			}
		},
		onPullDownRefresh () {},
		onShareAppMessage () {}
	}
</script>

<style lang="less" scoped>
	.sp-field__image {
		width: 100%;
		margin: 0 auto;
		
		swiper,
		swiper-wrapper {
			min-height: 1040rpx;
			height: auto;
		}
	}
</style>